<template>
    <div class="right-list">
        <div class="user">
            <div v-if="name" @click="router.push('/user')">
                <div class="user-avator">
                    <img :src="getImage('avator.png')" alt="">
                </div>
                <div class="user-name">
                    {{ name }}
                </div>
                <div class="user-vip">
                    当前vip等级：<span>{{ whatVIP(points) }}</span>
                </div>
                <div>
                    当前余额：{{ balance ? balance : 0 }} 元
                </div>
                <div>{{ useTableList.length > 0 ? "当前正在使用或预约" + useTableList + '号球台' : "当前未使用或预约球台" }}</div>
            </div>
            <div v-else class="no-login" @click="router.push('/login')">
                <p>游客您好</p>
                <p>点击此处登录后使用功能</p>
            </div>
        </div>
        <div class="notice">
            <!-- <h4>公告</h4>
            <p>开业大酬宾，充值1000送100000</p>
            <p>店内新上钛合金球杆，限量发售，欲购从速</p> -->
            <div v-if="userStore.account == 'Wcadmin1'" style="font-size: 22px;" @click="router.push('/admin')">
                点击查看今日消费数据</div>
        </div>
    </div>
</template>

<script setup>
import { getImage } from '@/utils';
import useUserStore from '@/stores/module/user';
import { onMounted, ref, toRefs } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()
const userStore = useUserStore()
const { name, points, balance } = toRefs(userStore)
/**
 * @description: 获取用户信息
 * @return {*}
 */
const getUser = async () => {
    await userStore.userInfo()
}

onMounted(() => {
    getUser()
    getUseTable()
})
const vipLevels = [
    { min: 0, max: 999, level: '基础台球会员' },  // Basic Cue Member
    { min: 1000, max: 4999, level: '黄金积分达人' }, // Gold Points Master
    { min: 5000, max: 9999, level: '白金台球精英' }, // Platinum Cue Elite
    { min: 10000, max: 19999, level: '高级积分先锋' }, // Advanced Points Pioneer
    { min: 20000, max: 29999, level: '钻石台球尊享' }, // Diamond Cue Exclusive
    { min: 30000, max: 49999, level: '至尊积分明星' }, // Supreme Points Star
    { min: 50000, max: Infinity, level: '顶级台球贵宾' } // Top Cue VIP
];

const whatVIP = (cent) => {
    const level = vipLevels.find(vip => cent >= vip.min && cent <= vip.max);
    return level ? level.level : '未知等级'; // Unknown Level
};


const useTableList = ref('')
const getUseTable = async () => {
    await userStore.getUseruseTable()
    useTableList.value = userStore.userUseTable.join(',')
}
</script>

<style lang="scss" scoped>
.right-list {
    width: 400px;

    .user {
        padding-top: 40px;
        font-size: 16px;
        border-bottom: 1px solid black;
        background-color: rgb(240, 240, 240);

        .no-login {
            height: 290px;
            font-size: 24px;
        }


        div {
            text-align: center;
            margin: 10px 0;
        }

        .user-avator {
            margin: 0 auto;
            overflow: hidden;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 2px solid black;

            img {
                width: 100%;

            }
        }

        .user-vip {
            font-size: 16px;

            span {
                color: red;
                font-size: 22px;
            }
        }

        .user-name {
            font-size: 24px;
        }
    }

    .notice {
        padding: 20px;

        h4 {
            text-align: center;
            font-size: 26px;
        }

        p {
            margin: 10px 0;
            font-size: 22px;
        }
    }
}
</style>
